<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <title>显示方案设置</title>
    <link rel="stylesheet" href="css/demo.css">
    <script src="js/configData.js"></script>


    <script src="libs/axios.min.js"></script>
    <script src="libs/httpService.js"></script>
    <script src="js/demo.js"></script>
</head>
<style>
    html,
    body,
    #map {
        width: 100%;
        height: 100%;
        margin: 0;
    }
</style>

<body id="body">
<div id='map'></div>
<div class="opt_panel">
    <button onclick="onAddDS()">添加显示方案</button>
    <br><br>
    <button onclick="onSetlayers()">仅显示变压器</button>
    <button onclick="onSetDSGlobe()">全局样式</button>
    <button onclick="onSetDSDev()">局部设备样式覆盖</button>
    <br><br>
    <button onclick="onRestorePG()">恢复默认电网配色</button>
</div>
</body>

</html>

<script>
    //示例说明：
    //该示例描述了如何配置本地显示方案（用来覆盖原有的电网设备样式）
    //DisplaySchema对象只能做样式覆盖，与DevCache的作用是不一样的，要先明白自身的业务场景后再搭配使用。

    //自定义示例参数
    mapOptions = {
        zoom: 15,
        center: [118.1598248101734, 24.474913496383763]
    }

    mapOptions = {
        zoom: 18.5,
        center: [108.88910646092154, 34.35196014438789]
        // zoom: 7,
        // center: [109.22580869210242, 34.87677818381978]
    }
    layers = []
    // displayFilter = [{'301000': 'oid=20895'}]

    rasterMapServiceUrl = 'http://25.75.5.17:9666/MapServer/json'


    //示例功能代码
    function onAddDS() {
        //自定义显示方案分2部分
        //globe是全局配置，configData是设备配置
        //全局配置优先级高于设备配置
        //如果需要在全局设备中让部分设备显示设备自身的颜色，那么globe中的exclude内对应图层id的设置下的common中的color设置为空即可


        //下面这段配置表示：
        //configData中：301000设备全部使用#ff0000颜色，301000类别中oid为486的设备颜色使用#00ff00，大小为2
        //接着由于配置了globe选项，configData中的配置会被globe中的选项覆盖
        //导致设备全局颜色变为#ccccc，而exclude中指定要排除的设备中，301000类型颜色默认使用栅格返回的默认颜色，而该类型中oid为486的设备颜色使用#ff00ff,大小为1
        //(可以将globe内的配置项注释掉，然后刷新页面，触发该方法看对应的效果)
        //【注：这个配置的数据结构后面可能会有调整】
        var displaySchema = new egisV2.support.DisplaySchema(
            {
                configData: {
                    '301000': {
                        common: {color: '#ff0000'},
                        486: {color: '#00ff00', size: 2}
                    }
                },
                globe: {
                    color: '#cccccc',//该配置项如不需要，可以留空或不填，全局设备颜色
                    //不参与全局颜色设置的设备
                    exclude: {
                        '300000': {
                            common: {color: ''},//有该选项则此类设备都不会被变成灰色，否则只有指定oid的设备不会设置为灰色
                            486: {color: '#ff00ff', size: 1}
                        }
                    }
                }

            }
        )
        gridLayer.setDisplaySchema(displaySchema)
        gridLayer.refresh()
    }

    function onRestorePG() {
        //1.修改设备（三绕组变压器）颜色/大小
        gridLayer.setDisplaySchema(null)
        //2.修改栅格出图相关参数
        let vecData = gridLayer.getVecRequestData()
        //更改图层显示参数
        vecData.layers = ''
        gridLayer.setVecRequestData(vecData)
        //刷新显示
        gridLayer.refresh()
    }

    function onSetlayers() {
        let vecData = gridLayer.getVecRequestData()
        //更改图层显示参数
        vecData.layers = '301000'
        gridLayer.setVecRequestData(vecData)
        //刷新显示
        gridLayer.refresh()
    }

    function onSetDSGlobe() {
        if (!gridLayer.getDisplaySchema()) {
            gridLayer.setDisplaySchema(new egisV2.support.DisplaySchema())
        }
        let dsData = gridLayer.getDisplaySchema().getSchema()
        if (dsData) {
            //下面的配置表示：
            // 全局设备颜色为 #0000ff
            // layerid为301000的设备全部使用栅格返回的默认颜色（因为common中的color为空，如果指定颜色，name所有设备使用指定的颜色值），而该类设备中oid为486的设备的颜色使用#ff00ff,大小为1
            dsData.globe = {
                color: '#0000ff',//全局颜色目前只支持color
                exclude: {
                    '301000': {
                        common: {color: ''},//这里为空表示使用设备默认颜色，如果指定颜色，设备则按指定颜色显示（此处目前只支持color属性）
                        486: {color: '#ff00ff', size: 1}//这里只支持color和size
                    }
                }
            }
            gridLayer.refresh()
        }

    }

    function onSetDSDev() {
        if (!gridLayer.getDisplaySchema()) {
            gridLayer.setDisplaySchema(new egisV2.support.DisplaySchema())
        }
        let dsData = gridLayer.getDisplaySchema().getSchema()
        if (dsData) {
            dsData.configData = {
                '301000': {
                    common: {color: '#ffff00', size: 0.5}
                }
            }
            gridLayer.refresh()
        }

    }

    window.onload = function () {
        loadGeoMap_ms(() => {
            mapServiceUrl = msServiceUrl + '/mapservice/mapexport/vecformat'
            initGridLayer()
        })
        // loadPowerGrid_microService()
    }

</script>
